<!-- 页面 -->
<template>
    <div>
        <h1>vip</h1>
        <!-- {{ name }} -->
        学员姓名：<input type="text" v-model="list.name"><br>
        学员手机号：<input type="text" v-model="list.age"> <br>
        <button @click="add" v-if="show">提交</button>

        <button @click="xi" v-else>修改</button>
        <button @click="cz">重置</button>
        <one-com :list="list.info" @channel="del(index)" @bia="xiu"></one-com>
    </div>
</template>
<script setup>
import oneCom from '../components/channel/one.vue'
import { ref, provide, reactive } from 'vue'

let show = true
const list = reactive({
    name: "",
    age: '',
    info: [],
    i:''
})
// console.log(list);
// let two = reactive(null)
function add() {
    list.info.push({
        name: list.name,
        age: list.age,
        num: new Date().toLocaleString()
    })
    list.name = ''
    list.age = ''
    console.log(list);
}

function del(index) {
    list.info.splice(index, 1)
}
function xi() {
    //   list:''
    // list.info.push({
    //     name: list.name,
    //     age: list.age,
    //     num: new Date().toLocaleString()
    // })
    list.info[list.i].name = list.name
    list.info[list.i].age = list.age
}
function xiu(item) {
    show = false
    console.log(item);
    list.name = item.item.name
    list.age = item.item.age
    list.i = item.index
}
</script>
<style></style>